<template>
  <div class="downloads">
    <!-- 软件下载页面 -->
    <!-- 软件下载部分 -->
    <div class="software">
      <!-- windows端 -->
      <div class="window">
        <i class="circleIcon fa fa-circle" aria-hidden="true"></i>
        <span class="title">Windows端</span>
        <div class="windowsItem">
          <div class="downloadsItem" v-for="(item, index) in windowsData" :key="index">
            <div class="imgBox">
              <img :src="item.img" />
            </div>
            <div class="describe">
              {{item.title}}
              <span>{{item.replenish}}</span>
            </div>
            <div class="infomation">
              <div class="infoContent">
                <div class="version">
                  版本:
                  <span>{{item.version}}</span>
                </div>
                <div class="size">
                  大小:
                  <span>{{item.size}}</span>
                </div>
                <div class="apply">
                  适用:
                  <span>{{item.apply}}</span>
                </div>
              </div>
              <div class="downloadBtn">
                <el-button type="primary" size="mini" round>
                  <a :href="item.downloadUrl">立即下载</a>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- ios端 -->
      <div class="window">
        <i class="circleIcon fa fa-circle" aria-hidden="true"></i>
        <span class="title">ios端</span>
        <div class="windowsItem">
          <div class="downloadsItem" v-for="(item, index) in IOSData" :key="index">
            <div class="imgBox">
              <img
                :src="item.imgNull"
                @mouseenter="item.imgNull = item.codeImg"
                @mouseleave="item.imgNull = item.img"
              />
            </div>
            <div class="describe">
              {{item.title}}
              <span>{{item.replenish}}</span>
            </div>
            <div class="infomation">
              <div class="infoContent">
                <div class="version">
                  版本:
                  <span>{{item.version}}</span>
                </div>
                <div class="size">
                  大小:
                  <span>{{item.size}}</span>
                </div>
                <div class="apply">
                  适用:
                  <span>{{item.apply}}</span>
                </div>
              </div>
              <div class="downloadBtn">
                <el-button type="primary" size="mini" round>
                  <a :href="item.downloadUrl">立即下载</a>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Android端 -->
      <div class="window">
        <i class="circleIcon fa fa-circle" aria-hidden="true"></i>
        <span class="title">Android端</span>
        <div class="windowsItem">
          <div class="downloadsItem" v-for="(item, index) in AndroidData" :key="index">
            <div
              class="imgBox"
              @mouseenter="handleCodeShow(item)"
              @mouseleave="handleCodeHidden(item)"
            >
              <img :src="item.imgNull" />
            </div>
            <div class="describe">
              {{item.title}}
              <span>{{item.replenish}}</span>
            </div>
            <div class="infomation">
              <div class="infoContent">
                <div class="version">
                  版本:
                  <span>{{item.version}}</span>
                </div>
                <div class="size">
                  大小:
                  <span>{{item.size}}</span>
                </div>
                <div class="apply">
                  适用:
                  <span>{{item.apply}}</span>
                </div>
              </div>
              <div class="downloadBtn">
                <el-button type="primary" size="mini" round>
                  <a :href="item.downloadUrl">立即下载</a>
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 资料下载部分 -->
    <div class="material">
      <!-- 使用手册 -->
      <div class="notebook">
        <i class="circleIcon fa fa-circle" aria-hidden="true"></i>
        <span class="title">使用手册</span>
        <div class="noteItem">
          <div class="notebookItem" v-for="(item, index) in notebookData" :key="index">
            <div class="noteImg">
              <img :src="item.noteImg" alt />
            </div>
            <div class="noteInfo">
              <div class="noteTitle">{{item.title}}</div>
              <div class="upDate">
                更新日期：
                <span>{{item.update}}</span>
              </div>
              <div class="downBtn">
                <button>
                  <a :href="item.nodeUrl">立即下载</a>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 资料下载 -->
      <div class="notebook">
        <i class="circleIcon fa fa-circle" aria-hidden="true"></i>
        <span class="title">资料下载</span>
        <div class="noteItem">
          <div class="notebookItem" v-for="(item, index) in materialData" :key="index">
            <div class="noteImg">
              <img src="../../assets/downloads/手册.png" alt />
            </div>
            <div class="noteInfo">
              <div class="noteTitle">{{item.title}}</div>
              <div class="upDate">
                更新日期：
                <span>{{item.update}}</span>
              </div>
              <div class="downBtn">
                <button>
                  <a :href="item.nodeUrl">立即下载</a>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 电脑端数据
      windowsData: [
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Windows1.png",
          title: "德客",
          replenish: "(全行业通用版)",
          version: "V3.00",
          size: "74.50MB",
          apply: "XP、win7以上",
          downloadUrl: "http://www.decerp.cn/res/德客软件安装包.exe"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Windows2.png",
          title: "德客餐饮",
          replenish: "",
          version: "V2.06.15",
          size: "24.40MB",
          apply: "XP、win7以上",
          downloadUrl: "http://www.decerp.cn/res/德客餐饮版安装包.exe"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Windows3.png",
          title: "德客零售",
          replenish: "",
          version: "V2.06.15",
          size: "24.20MB",
          apply: "XP、win7以上",
          downloadUrl: "http://www.decerp.cn/res/德客零售版安装包.exe"
        }
      ],
      // ios数据
      IOSData: [
        {
          img: "http://www.decerp.cn/productstyle/eightimg/ios-p1.png",
          codeImg: "http://www.decerp.cn/productstyle/imags/appdownshare.jpg",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/ios-p1.png",
          title: "ios手机版",
          replenish: "",
          version: "V1.6.7",
          size: "24.50MB",
          apply: "ios8以上",
          downloadUrl: "https://itunes.apple.com/cn/app/de-ke/id1128257396?mt=8"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Android3.png",
          codeImg: "http://www.decerp.cn/productstyle/imags/appdownshare.jpg",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/ios-p1.png",
          title: "德客会员收银HD",
          replenish: "",
          version: "V1.1.2",
          size: "20.90MB",
          apply: "ios8以上",
          downloadUrl: "#"
        }
      ],
      // 安卓端数据
      AndroidData: [
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Android1.png",
          codeImg: "http://www.decerp.cn/productstyle/eightimg/shangmiT1.png",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/Android1.png",
          title: "德客行业版",
          replenish: "",
          version: "V1.0",
          size: "12.00MB",
          apply: "Android4.0以上",
          downloadUrl: "http://www.decerp.cn/res/德客.apk"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Android2.png",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/Android2.png",
          codeImg: "http://www.decerp.cn/productstyle/imags/waimaihuicode.png",
          title: "德客外卖汇",
          replenish: "",
          version: "V1.1.3",
          size: "28.00MB",
          apply: "Android4.0以上",
          downloadUrl: "http://www.decerp.cn/res/德客外卖汇安装包.apk"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Android4.png",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/Android4.png",
          codeImg: "http://www.decerp.cn/productstyle/imags/appdownshare.jpg",
          title: "Android手机版",
          replenish: "",
          version: "V1.6.67",
          size: "25.64MB",
          apply: "Android4.0以上",
          downloadUrl: "http://www.decerp.cn/res/decerp.apk"
        },
        {
          img: "http://www.decerp.cn/productstyle/eightimg/Android.png",
          imgNull: "http://www.decerp.cn/productstyle/eightimg/Android.png",
          codeImg:
            "http://www.decerp.cn/productstyle/imags/androidipadcord.png",
          title: "Android平板版",
          replenish: "",
          version: "V1.1.6",
          size: "3.6MB",
          apply: "Android4.0以上",
          downloadUrl: "http://www.decerp.cn/res/德客收银安装包.apk"
        }
      ],
      // 使用手册数据
      notebookData: [
        {
          title: "通用版手册",
          update: "2018-01-01",
          noteImg: require("../../assets/downloads/D1.png"),
          nodeUrl: "http://www.decerp.cn/res/德客软件操作手册（商户版）.pdf"
        },
        {
          title: "零售版使用手册",
          update: "2018-01-01",
          noteImg: require("../../assets/downloads/D2.png"),
          nodeUrl: "http://www.decerp.cn/res/德客零售操作手册（商户版）.pdf"
        },
        {
          title: "餐饮版使用手册",
          update: "2018-01-01",
          noteImg: require("../../assets/downloads/D3.png"),
          nodeUrl: "http://www.decerp.cn/res/德客餐饮操作手册（商户版）.pdf"
        },
        {
          title: "服装版使用手册",
          update: "2018-01-01",
          noteImg: require("../../assets/downloads/D1.png"),
          nodeUrl: "http://www.decerp.cn/res/德客服装会员管理系统操作手册.pdf"
        }
      ],
      // 资料下载数据
      materialData: [
        {
          title: "收银画册",
          update: "2018-01-01",
          nodeUrl: "http://www.decerp.cn/res/德客软件产品介绍.pdf"
        },
        {
          title: "零售画册",
          update: "2018-01-01",
          nodeUrl: "http://www.decerp.cn/res/德客画册（零售版）.pdf"
        },
        {
          title: "餐饮画册",
          update: "2018-01-01",
          nodeUrl: "http://www.decerp.cn/res/德客餐饮收银软件.pdf"
        }
      ]
    };
  },
  methods: {
    // 显示二维码
    handleCodeShow(val) {
      val.imgNull = val.codeImg;
    },
    // 隐藏二维码
    handleCodeHidden(val) {
      val.imgNull = val.img;
    }
  }
};
</script>

<style lang="less" scoped>
.downloads {
  // 标题前的小圆点
  .circleIcon {
    font-size: 12px;
  }
  // 标题
  .title {
    color: #000;
  }
  // 软件下载
  .software {
    display: flex;
    flex-wrap: wrap;
    // windows端
    .window {
      margin-bottom: 40px;
      flex: 1;
      .windowsItem {
        display: flex;
        .downloadsItem {
          margin-top: 10px;
          background-color: #fff;
          padding: 10px;
          width: 300px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-right: 50px;
          border-radius: 10px;
          .imgBox {
            background-color: #f5f5f5;
            text-align: center;
            border-radius: 10px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            > img {
              height: 80%;
            }
          }
          .describe {
            color: #00cc99;
            margin: 10px 0;
            span {
              font-size: 12px;
              color: #666;
            }
          }
          .infomation {
            display: flex;
            font-size: 12px;
            position: relative;
            .downloadBtn {
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }
        }
      }
    }
  }
  // 资料下载
  .material {
    display: flex;
    flex-wrap: wrap;
    .notebook {
      .noteItem {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-bottom: 20px;
        .notebookItem {
          display: flex;
          background-color: #fff;
          padding: 20px;
          margin-right: 30px;
          border-radius: 10px;
          min-width: 300px;
          margin-bottom: 20px;
          .noteImg {
            width: 100px;
            height: 100px;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            > img {
              width: 80%;
            }
          }
          .noteInfo {
            .noteTitle {
              color: #30c17b;
              font-size: 18px;
            }
            .upDate {
              font-size: 12px;
              margin-bottom: 40px;
            }
            .downBtn {
              button {
                border: none;
                background-color: inherit;
                color: #409eff;
                cursor: pointer;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>